<template>
  <el-dialog
    width="65%"
    :title="title"
    :visible.sync="visible"
    :before-close="handleClose">
    <el-form
      :rules="forDataRules"
      ref="formData"
      :model="formData"
      label-width="100px">
      <br/>
      <el-row>
        <el-col :span="12"><div>
          <el-form-item label="用户手机：" prop="mobile">
            <el-input
              :disabled="true"
              v-model="formData.mobile"
              style="width: 300px"></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="12"><div>
          <el-form-item label="讲师名称：" prop="name">
            <el-input
              v-model="formData.name"
              oninput="value=value.replace(/[^\u4E00-\u9FA5]/g, '');"
              maxlength="10"
              show-word-limit
              style="width: 300px">
            </el-input>
          </el-form-item>
        </div></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><div>
          <el-form-item label="电子邮箱：" prop="email">
            <el-input
              :disabled="true"
              v-model="formData.email"
              style="width: 300px">
            </el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="12"><div>
          <el-form-item label="讲师排序：">
            <el-input-number
              style="width: 300px;"
              v-model="formData.sort"
              @change="handleChange"
              :min="0"
              :max="999">
            </el-input-number>
          </el-form-item>
        </div></el-col>
      </el-row>
      <el-form-item label="讲师资历：" prop="intro">
        <el-input
          v-model="formData.intro"
          style="width:92%;"
          maxlength="100"
          show-word-limit
          clearable
          type="text" />
      </el-form-item>
      <el-form-item label="讲师简介：" prop="career">
        <el-input
          type="textarea"
          style="width: 92%"
          maxlength="500"
          show-word-limit
          :autosize="{ minRows: 10, maxRows: 12}"
          v-model="formData.career">
        </el-input>
      </el-form-item>
    </el-form>
    <el-row style="margin-top:17px; ">
      <el-button style="float:right;margin-left:6px;" size="small" type="danger" @click="handleClose">取 消</el-button>
      <el-button style="float:right" size="small" type="primary" @click="submitForm('formData')">确 定</el-button>
    </el-row>
  </el-dialog>
</template>
<script>
  import { updateAuditById } from '@/api/audit'
  import { validName,validNormal } from '@/utils/validate'

  export default {
    data() {

      //检验资历
      const validateIntro = (rule, value, callback) => {
        if (value.length < 5 || value.length > 100 || !validNormal(value)){
          callback(new Error("请输入正确的资历，长度要求为10-100，且不能输入特殊字符"))
        }
        else callback()
      }

      //检验简介
      const validateCareer = (rule, value, callback) => {
        if (value.length < 50 || value.length > 500 || !validNormal(value)){
          callback(new Error("请输入正确的简介，长度要求为50-500，且不能输入特殊字符"))
        }
        else callback()
      }

      //检验姓名
      const validateName = (rule, value, callback) => {
        if (!validName(value)){
          callback(new Error("请输入正确的姓名，长度要求为2-10，只能输入中文"))
        }
        else callback()
      }

      return {
        //检验规则
        forDataRules:{
          intro:[{validator: validateIntro,trigger: 'blur'}],
          career:[{validator: validateCareer,trigger: 'blur'}],
          name:[{validator: validateName,trigger: 'blur'}],
        }
      }
    },
    props: {
      formData: {
        type: Object,
        default: () => {}
      },
      visible: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      }
    },
    methods: {
      handleClose(done) {
        this.$refs.formData.resetFields()
        this.$emit('close-callback')
      },
      handleChange(value) {
        this.formData.sort = value
      },
      submitForm(formData) {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            if (this.formData.id === undefined) {
              this.$message({
                type: 'error',
                message: "修改失败！"
              });
            }
            if (this.formData.sort == undefined){
              this.formData.sort = 0
            }
            updateAuditById(this.formData.id,this.$qs.stringify(this.formData))
              .then(res => {
              if (res.code === 20000) {
                // 提交成功, 关闭窗口, 刷新列表
                this.$message({
                  type: 'success',
                  message: "修改成功！"
                });
                this.handleClose()
              }
            }).catch(() => {})
          } else {
            return false;
          }
        })
      }
    }
  }
</script>
